<template>
<div>
    <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v,i) in imglist" :key="i">
            <img :src="v" alt="加载中">
    </van-swipe-item>
    </van-swipe>

    <div class="goods">
        <!-- 鞋子 -->
        <div class="shoe cleafix">
            <ul>
                <li> <img src="../../assets/images/nav1.png" alt=""> </li>
                <li> <img src="../../assets/images/nav2.png" alt=""></li>
                <li> <img src="../../assets/images/nav3.png" alt=""></li>
                <li> <img src="../../assets/images/nav4.png" alt=""></li>
                <li> <img src="../../assets/images/nav5.png" alt=""></li>
                <li> <img src="../../assets/images/nav6.png" alt=""></li>
            </ul>
        </div>
        <!-- 品牌  -->

    </div>
    <div class="goods2">
        <!-- 鞋子 -->
        <div class="shoe2 cleafix">
            <ul>
                <li> <img src="../../assets/images/active1.png" alt=""> </li>
                <li> <img src="../../assets/images/active2.png" alt=""></li>
                <li> <img src="../../assets/images/active3.png" alt=""></li>
                <li> <img src="../../assets/images/active4.png" alt=""></li>
                <li> <img src="../../assets/images/active5.png" alt=""></li>

                <!-- <li> <img src="../../assets/images/title0.png" alt=""></li>
                <li> <img src="../../assets/images/title1.png" alt=""></li>
                <li> <img src="../../assets/images/title3.png" alt=""></li>
                <li> <img src="../../assets/images/title4.png" alt=""></li> -->

                <li> <img src="../../assets/images/brand1.png" alt=""></li>
                <li> <img src="../../assets/images/brand2.png" alt=""></li>
                <li> <img src="../../assets/images/brand3.png" alt=""></li>
                <li> <img src="../../assets/images/brand4.png" alt=""></li>
                <li> <img src="../../assets/images/brand5.png" alt=""></li>
                <li> <img src="../../assets/images/brand6.png" alt=""></li>
                <li> <img src="../../assets/images/brand7.png" alt=""></li>
                <li> <img src="../../assets/images/brand8.png" alt=""></li>

                <li> <img src="../../assets/images/product.jpg" alt=""></li>

            </ul>
        </div>
        <!-- 品牌  -->

    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            imglist: [
                require('../../assets/images/banner1.png'),
                require('../../assets/images/banner2.png'),
                require('../../assets/images/banner3.png'),
                require('../../assets/images/banner4.png'),
                require('../../assets/images/banner5.png'),
                require('../../assets/images/banner6.png')
            ]
        }
    }
}
</script>

<style>
.goods {
    margin: 0 5px;
}

/* 鞋子 */
.shoe {
    /* margin-top: 10px; */
    margin-bottom: 5px;
}

.shoe img {
    float: left;
    width: 33.33%;
}

.shoe2 img{
    width: 50%;
 float: left;
}
</style>
